function updateData() {
    const socket = new WebSocket('ws://localhost:8081/ws');
    const dataDisplay = document.getElementById('dataDisplay');

    socket.onopen = function(event) {
        console.log('WebSocket is open now.');
    };

    socket.onmessage = function(event) {
        const data = JSON.parse(event.data);

        if (data.type === 'device_info_parameters') {
            updateHTML1(data.data);
        }
        if (data.type === 'device_realtime_data') {
            updateHTML2(data.data);
        }
        if (data.type === 'hoisting_data_upload') {
            updateHTML3(data.data);
        }
        else {
            console.error('Received data type is not right type:', data);
        }
    };

    socket.onclose = function(event) {
        console.log('WebSocket is closed now.');
    };

    socket.onerror = function(error) {
        console.error('WebSocket error:', error);
    };

    function updateHTML1(data) {

        document.getElementById('SIM').textContent = data.SIM;


        document.getElementById('groupID').textContent = data.GroupID;


        document.getElementById('towerID').textContent = data.TowerID;


        document.getElementById('landyard').textContent = data.Landyard;


        document.getElementById('posX').textContent = data.PosX;


        document.getElementById('posY').textContent = data.PosY;


        document.getElementById('forarmlen').textContent = data.Forarmlen;


        document.getElementById('rearmlen').textContent = data.Rearmlen;

        document.getElementById('towerhathight').textContent = data.Towerhathight;


        document.getElementById('towerhight').textContent = data.Towerhight;


        document.getElementById('inslongti').textContent = data.Inslongti;


        document.getElementById('inslati').textContent = data.Inslati;


        document.getElementById('leftmax').textContent = data.Leftmax;


        document.getElementById('rightmax').textContent = data.Rightmax;


        document.getElementById('cargototowerformax').textContent = data.CargotoTowerformax;


        document.getElementById('carcyctotowermin').textContent = data.CarcyctoTowermin;


        document.getElementById('hookmaxhight').textContent = data.Hookmaxhight;


        document.getElementById('maxload').textContent = data.Maxload;


        document.getElementById('torquemax').textContent = data.Torquemax;


        document.getElementById('warning').textContent = data.Warning;


        document.getElementById('alert').textContent = data.Alert;


        document.getElementById('illegal').textContent = data.Illegal;

    }
    function updateHTML2(data) {
    document.getElementById('uploadtime_real').textContent = data.uploadtime_real;


		document.getElementById('hight').textContent = data.Hight;


		document.getElementById('amplitude').textContent = data.Amplitude;


		document.getElementById('angle').textContent = data.Angle;


		document.getElementById('load').textContent = data.Load;


		document.getElementById('safeload').textContent = data.SafeLoad;


		document.getElementById('safeloadpercentage').textContent = data.SafeLoadPercentage;


		document.getElementById('torque').textContent = data.Torque;


		document.getElementById('torqueloadpercentage').textContent = data.TorqueLoadPercentage;


		document.getElementById('windspeed').textContent = data.Windspeed;


		document.getElementById('inclinationX').textContent = data.InclinationX;


		document.getElementById('inclinationY').textContent = data.InclinationY;


		document.getElementById('devStatus').textContent = data.DevStatus;


		document.getElementById('deepth').textContent = data.Deepth;
    }
    function updateHTML3(data) {
    document.getElementById('uploadtime_hoi').textContent = data.uploadtime_hoi;


		document.getElementById('begintime').textContent = data.Begintime;


		document.getElementById('endtime').textContent = data.Endtime;


		document.getElementById('maxload').textContent = data.Maxload;


		document.getElementById('maxLoadPercentage').textContent = data.MaxLoadPercentage;


		document.getElementById('maxtorque').textContent = data.MaxTorque;


		document.getElementById('maxtorquepercentage').textContent = data.MaxTorquePercentage;


		document.getElementById('beginangle').textContent = data.BeginAngle;

		document.getElementById('endangle').textContent = data.EndAngle;

		document.getElementById('beginamplitude').textContent = data.BeginAmplitude;


		document.getElementById('endamplitude').textContent = data.EndAmplitude;


		document.getElementById('maxamplitude').textContent = data.MaxAmplitude;


		document.getElementById('minamplitude').textContent = data.MinAmplitude;


		document.getElementById('beginHight').textContent = data.BeginHight;


		document.getElementById('endhight').textContent = data.EndHight;


		document.getElementById('maxhight').textContent = data.MaxHight;


		document.getElementById('minhight').textContent = data.MinHight;


		document.getElementById('maxwindspeed').textContent = data.MaxWindSpeed;


		document.getElementById('maxinclinationX').textContent = data.MaxInclinationX;


		document.getElementById('maxinclinationY').textContent = data.MaxInclinationY;


		document.getElementById('cranestatus').textContent = data.CraneStatus;


		document.getElementById('torquestatus').textContent = data.TorqueStatus;


		document.getElementById('windspeedstatus').textContent = data.WindspeedStatus;


		document.getElementById('amplitudestatus').textContent = data.AmplitudeStatus;


		document.getElementById('hightstatus').textContent = data.HightStatus;


		document.getElementById('inclinationstatus').textContent = data.InclinationStatus;


		document.getElementById('rotationstatus').textContent = data.RotationStatus;
        }
}

window.onload = function() {
    updateData();
};
